<template>
  <div class="app-container">
    <!--  搜索查询条件  -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-row>
        <el-col>
          <el-form-item label="" prop="Status">
            <el-select v-model="queryParams.Status" @clear="clearStatus" placeholder="请选择审核状态" style="width: 240px;margin-right: 10px;" clearable>
              <el-option
                  v-for="dict in service_warranty_card_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="" prop="Name">
            <el-input
                v-model="queryParams.Name"
                placeholder="请输入客户姓名"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="Mobile">
            <el-input
                v-model="queryParams.Mobile"
                placeholder="请输入客户手机号"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="Province">
            <el-input
                v-model="queryParams.Province"
                placeholder="请输入省份"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="City">
            <el-input
                v-model="queryParams.City"
                placeholder="请输入城市"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="cardNumber">
            <el-input
                v-model="queryParams.cardNumber"
                placeholder="请输入质保卡卡号"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="StoreName">
            <el-input
                v-model="queryParams.StoreName"
                placeholder="请输入门店名称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="" prop="StoreLink">
            <el-input
                v-model="queryParams.StoreLink"
                placeholder="请输入门店联系方式"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="auditBy">
            <el-input
                v-model="queryParams.auditBy"
                placeholder="请输入审核人"
                clearable
                @keyup.enter="handleQuery"
                style="width: 240px"
            />
          </el-form-item>

          <el-form-item label="" prop="Created" style="width: 240px; margin-right: 10px;">
            <el-date-picker
                v-model="dateRangeCreated"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="创建开始日期"
                end-placeholder="创建结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="" prop="BuyDay" style="width: 240px;">
            <el-date-picker
                v-model="dateRangeBuyDay"
                value-format="YYYY-MM-DD"
                type="daterange"
                range-separator="-"
                start-placeholder="购买开始日期"
                end-placeholder="购买结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

<!--      <el-row :gutter="10" class="mb8">-->
<!--        <el-col>-->
<!--&lt;!&ndash;          <el-form-item label="轮胎条形码1" prop="TireCode1">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="queryParams.TireCode1"&ndash;&gt;-->
<!--&lt;!&ndash;                placeholder="请输入轮胎条形码1"&ndash;&gt;-->
<!--&lt;!&ndash;                clearable&ndash;&gt;-->
<!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
<!--&lt;!&ndash;            />&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-form-item label="轮胎条形码2" prop="TireCode2">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="queryParams.TireCode2"&ndash;&gt;-->
<!--&lt;!&ndash;                placeholder="请输入轮胎条形码2"&ndash;&gt;-->
<!--&lt;!&ndash;                clearable&ndash;&gt;-->
<!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
<!--&lt;!&ndash;            />&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-form-item label="轮胎条形码3" prop="TireCode3">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="queryParams.TireCode3"&ndash;&gt;-->
<!--&lt;!&ndash;                placeholder="请输入轮胎条形码3"&ndash;&gt;-->
<!--&lt;!&ndash;                clearable&ndash;&gt;-->
<!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
<!--&lt;!&ndash;            />&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-form-item label="轮胎条形码4" prop="TireCode4">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="queryParams.TireCode4"&ndash;&gt;-->
<!--&lt;!&ndash;                placeholder="请输入轮胎条形码4"&ndash;&gt;-->
<!--&lt;!&ndash;                clearable&ndash;&gt;-->
<!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
<!--&lt;!&ndash;            />&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-form-item label="openid" prop="OpenId">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input&ndash;&gt;-->
<!--&lt;!&ndash;                v-model="queryParams.OpenId"&ndash;&gt;-->
<!--&lt;!&ndash;                placeholder="请输入openid"&ndash;&gt;-->
<!--&lt;!&ndash;                clearable&ndash;&gt;-->
<!--&lt;!&ndash;                @keyup.enter="handleQuery"&ndash;&gt;-->
<!--&lt;!&ndash;            />&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--          -->
<!--        </el-col>-->
<!--      </el-row>-->

    </el-form>

    <!--  按钮信息 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="Plus"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['warrantyCard:warrantyCard:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="Edit"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['warrantyCard:warrantyCard:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="Delete"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['warrantyCard:warrantyCard:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['merchant:warrantyCard:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <!--  列表视图数据    -->
    <el-table height="calc(100vh - 330px)" stripe="true" show-overflow-tooltip="true" v-loading="loading" :data="warrantyCardList" @selection-change="handleSelectionChange" >
<!--      <el-table-column  type="selection" width="55" align="center" />-->
      <el-table-column label="编号" align="center" prop="Id" v-if="columns[0].visible" :width="flexColumnWidth('编号','Id')" />
      <el-table-column  fixed="left" label="购买日期" align="center" prop="BuyDay" width="180" v-if="columns[1].visible" :width="flexColumnWidth('购买日期','BuyDay')"  >
        <template #default="scope">
          <span>{{ parseTime(scope.row.BuyDay, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="left" label="质保卡号" align="center" prop="cardNumber" v-if="columns[2].visible" :width="flexColumnWidth('质保卡号','cardNumber')" />
      <el-table-column fixed="left" label="客户姓名" align="center" prop="Name" v-if="columns[2].visible" :width="flexColumnWidth('客户姓名','Name')" />
      <el-table-column fixed="left" label="客户手机号" align="center" prop="Mobile" v-if="columns[2].visible" :width="flexColumnWidth('客户手机号','Mobile')" />
      <el-table-column label="车牌" align="center" prop="LicencePlate" v-if="columns[3].visible" :width="flexColumnWidth('车牌','LicencePlate')" />
      <el-table-column label="省份" align="center" prop="Province" v-if="columns[4].visible" :width="flexColumnWidth('省份','Province')" />
      <el-table-column label="城市" align="center" prop="City" v-if="columns[5].visible" :width="flexColumnWidth('城市','City')" />
      <el-table-column label="地址" align="center" prop="Address" v-if="columns[6].visible" :width="flexColumnWidth('地址','Address')" />
<!--      <el-table-column label="门店负责人" align="center" width="100" prop="StoreKeeperName" v-if="columns[4].visible" />-->
      <el-table-column label="门店名称" align="center" prop="StoreName" v-if="columns[7].visible" :width="flexColumnWidth('门店名称','StoreName')" />
      <el-table-column label="门店联系方式" align="center" prop="StoreLink" v-if="columns[8].visible" :width="flexColumnWidth('门店联系方式','StoreLink')" />

      <el-table-column label="轮胎条形码照片" align="center" prop="TireImage" width="200">
        <template #default="scope">
          <image-preview :src="scope.row.TireImage" :width="100" :height="80" />
        </template>
      </el-table-column>

      <el-table-column label="付款凭证" align="center" prop="InvoiceImage" width="200" v-if="columns[9].visible" >
        <template #default="scope">
          <image-preview :src="scope.row.InvoiceImage" :width="100" :height="80" />
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center" prop="Status" v-if="columns[10].visible" :width="flexColumnWidth('状态','Status')" >
        <template #default="scope">
          <dict-tag :options="service_warranty_card_status" :value="scope.row.Status" />
        </template>
      </el-table-column>
<!--      <el-table-column label="openid" align="center" prop="OpenId" v-if="columns[11].visible" />-->
      <el-table-column label="审核人" align="center" prop="auditBy" v-if="columns[12].visible" :width="flexColumnWidth('审核人','auditBy')" />
      <el-table-column label="审核意见" align="center" prop="StatusMemo" width="600" height="80" v-if="columns[13].visible" />

      <el-table-column label="轮胎条形码" align="center" prop="TireCode1" width="200" hight="80" v-if="columns[14].visible">
        <template #default="scope">
          <div v-if="scope.row.TireCode1">轮胎条形码1 : {{scope.row.TireCode1}}</div>
          <div v-if="scope.row.TireCode2">轮胎条形码2 : {{scope.row.TireCode2}}</div>
          <div v-if="scope.row.TireCode3">轮胎条形码3 : {{scope.row.TireCode3}}</div>
          <div v-if="scope.row.TireCode4">轮胎条形码4 : {{scope.row.TireCode4}}</div>
        </template>
      </el-table-column>
<!--      <el-table-column label="轮胎条形码2" align="center" prop="TireCode2" v-if="columns[15].visible" :width="flexColumnWidth('轮胎条形码2','TireCode2')" />-->
<!--      <el-table-column label="轮胎条形码3" align="center" prop="TireCode3" v-if="columns[16].visible" :width="flexColumnWidth('轮胎条形码3','TireCode3')" />-->
<!--      <el-table-column label="轮胎条形码4" align="center" prop="TireCode4" v-if="columns[17].visible" :width="flexColumnWidth('轮胎条形码4','TireCode4')" />-->
<!--      <el-table-column label="轮胎条形码5" align="center" prop="TireCode5" />-->
<!--      <el-table-column label="轮胎条形码6" align="center" prop="TireCode6" />-->
<!--      <el-table-column label="轮胎条形码7" align="center" prop="TireCode7" />-->
<!--      <el-table-column label="轮胎条形码8" align="center" prop="TireCode8" />-->
<!--      <el-table-column label="须知同意" align="center" prop="Agree">-->
<!--        <template #default="scope">-->
<!--          <dict-tag :options="sys_yes_no" :value="scope.row.Agree"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="创建时间" align="center" prop="Created" width="180" v-if="columns[18].visible" :width="flexColumnWidth('创建时间','Created')" >
        <template #default="scope">
          <span>{{ parseTime(scope.row.Created, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="scope">
<!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['merchant:warrantyCard:edit']">修改</el-button>-->
          <el-button link type="primary" icon="View" @click="handleAudit(scope.row, 1)" v-hasPermi="['merchant:warrantyCard:edit']"  v-if="scope.row.Status != 1">详 情</el-button>
          <el-button link type="primary" icon="Edit" @click="handleAudit(scope.row, 2)" v-hasPermi="['merchant:warrantyCard:edit']"  v-if="scope.row.Status == 1">审 核</el-button>
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['merchant:warrantyCard:remove']">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--  列表分页视图数据   -->
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改质保卡对话框 -->
    <el-dialog :title="title" v-model="open" append-to-body>
      <el-form ref="warrantyCardRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="门店名称" prop="StoreName">
          <el-input v-model="form.StoreName" placeholder="请输入门店名称" />
        </el-form-item>
        <el-form-item label="省份" prop="Province">
          <el-input v-model="form.Province" placeholder="请输入省份" />
        </el-form-item>
        <el-form-item label="城市" prop="City">
          <el-input v-model="form.City" placeholder="请输入城市" />
        </el-form-item>
        <el-form-item label="地址" prop="Address">
          <el-input v-model="form.Address" type="textarea" placeholder="请输入内容" />
        </el-form-item>
<!--        <el-form-item label="门店负责人" style="width: 400px" prop="StoreKeeperName">-->
<!--          <el-input v-model="form.StoreKeeperName" placeholder="请输入门店负责人" />-->
<!--        </el-form-item>-->
        <el-form-item label="门店联系方式" prop="StoreLink">
          <el-input v-model="form.StoreLink" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="购买日期" prop="BuyDay">
          <el-date-picker clearable
            v-model="form.BuyDay"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择购买日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发票地址" prop="InvoiceImage">
          <image-upload v-model="form.InvoiceImage"/>
        </el-form-item>
<!--        <el-form-item label="openid" prop="OpenId">-->
<!--          <el-input v-model="form.OpenId" placeholder="请输入openid" />-->
<!--        </el-form-item>-->
        <el-form-item label="状态" prop="Status">
          <el-radio-group v-model="form.Status">
            <el-radio
              v-for="dict in service_warranty_card_status"
              :key="dict.value"
              :label="parseInt(dict.value)" >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="StatusMemo">
          <el-input v-model="form.StatusMemo" type="textarea" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="轮胎条形码1" prop="TireCode1">
          <el-input v-model="form.TireCode1" placeholder="请输入轮胎条形码1" />
        </el-form-item>
        <el-form-item label="轮胎条形码2" prop="TireCode2">
          <el-input v-model="form.TireCode2" placeholder="请输入轮胎条形码2" />
        </el-form-item>
        <el-form-item label="轮胎条形码3" prop="TireCode3">
          <el-input v-model="form.TireCode3" placeholder="请输入轮胎条形码3" />
        </el-form-item>
        <el-form-item label="轮胎条形码4" prop="TireCode4">
          <el-input v-model="form.TireCode4" placeholder="请输入轮胎条形码4" />
        </el-form-item>
<!--        <el-form-item label="轮胎条形码5" prop="TireCode5">-->
<!--          <el-input v-model="form.TireCode5" placeholder="请输入轮胎条形码5" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="轮胎条形码6" prop="TireCode6">-->
<!--          <el-input v-model="form.TireCode6" placeholder="请输入轮胎条形码6" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="轮胎条形码7" prop="TireCode7">-->
<!--          <el-input v-model="form.TireCode7" placeholder="请输入轮胎条形码7" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="轮胎条形码8" prop="TireCode8">-->
<!--          <el-input v-model="form.TireCode8" placeholder="请输入轮胎条形码8" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="须知同意" prop="Agree">-->
<!--          <el-radio-group v-model="form.Agree">-->
<!--            <el-radio-->
<!--              v-for="dict in sys_yes_no"-->
<!--              :key="dict.value"-->
<!--              :label="parseInt(dict.value)"-->
<!--            >{{dict.label}}</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="创建时间" prop="Created">
          <el-date-picker clearable
                          v-model="form.Created"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审核质保卡对话框 -->
    <el-dialog :title="title2" v-model="open2" :width="750" :before-close="closeDialog" append-to-body>
      <el-form ref="warrantyCardRefAudit" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="质保卡号" prop="cardNumber">
              {{ form.cardNumber }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="门店名称" prop="StoreName">
              {{ form.StoreName }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="门店联系方式" prop="StoreLink">
              {{ form.StoreLink }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="门店省份城市" prop="Province">
              {{ form.Province }} - {{ form.City }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="购买日期" prop="BuyDay">
              {{ form.BuyDay }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22">
            <el-form-item label="门店地址" prop="Province">
             {{ form.Address }}
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-form-item label="openid" prop="OpenId">-->
        <!--          <el-input v-model="form.OpenId" placeholder="请输入openid" />-->
        <!--        </el-form-item>-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="轮胎条形码" prop="TireCode1">
              <template #default="scope">
                <ul style="list-style: none; display: flex; flex-direction: column; padding: 0; margin: 0;">
                <li><div v-if="form.TireCode1">
                  轮胎条形码1 : {{form.TireCode1}}
                  <span v-if="form.TireCode1Info">
                  (
                    {{form.TireCode1Info.productCode ? form.TireCode1Info.productCode : "暂无成品代码"}} |
                    {{form.TireCode1Info.productName ? form.TireCode1Info.productName : "暂无SIZE名"}} |
                    {{form.TireCode1Info.productionDate ? form.TireCode1Info.productionDate : "暂无生产日期"}} |
                    {{form.TireCode1Info.destination ? form.TireCode1Info.destination : "暂无目的地"}}
                    )
                  </span>
                </div></li>
                <li><div v-if="form.TireCode2">
                  轮胎条形码2 : {{form.TireCode2}}
                  <span v-if="form.TireCode2Info">
                  (
                    {{form.TireCode2Info.productCode ? form.TireCode2Info.productCode : "暂无成品代码"}} |
                    {{form.TireCode2Info.productName ? form.TireCode2Info.productName : "暂无SIZE名"}} |
                    {{form.TireCode2Info.productionDate ? form.TireCode2Info.productionDate : "暂无生产日期"}} |
                    {{form.TireCode2Info.destination ? form.TireCode2Info.destination : "暂无目的地"}}
                    )
                  </span>
                </div></li>
                <li><div v-if="form.TireCode3">
                  轮胎条形码3 : {{form.TireCode3}}
                  <span v-if="form.TireCode3Info">
                  (
                    {{form.TireCode3Info.productCode ? form.TireCode3Info.productCode : "暂无成品代码"}} |
                    {{form.TireCode3Info.productName ? form.TireCode3Info.productName : "暂无SIZE名"}} |
                    {{form.TireCode3Info.productionDate ? form.TireCode3Info.productionDate : "暂无生产日期"}} |
                    {{form.TireCode3Info.destination ? form.TireCode3Info.destination : "暂无目的地"}}
                    )
                  </span>
                </div></li>
                <li> <div v-if="form.TireCode4">
                  轮胎条形码4 : {{form.TireCode4}}
                  <span v-if="form.TireCode4Info">
                  (
                    {{form.TireCode4Info.productCode ? form.TireCode4Info.productCode : "暂无成品代码"}} |
                    {{form.TireCode4Info.productName ? form.TireCode4Info.productName : "暂无SIZE名"}} |
                    {{form.TireCode4Info.productionDate ? form.TireCode4Info.productionDate : "暂无生产日期"}} |
                    {{form.TireCode4Info.destination ? form.TireCode4Info.destination : "暂无目的地"}}
                    )
                  </span>
                </div></li>
                </ul>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-form-item label="轮胎条形码2" prop="TireCode2">-->
<!--          {{ form.TireCode2 }}-->
<!--        </el-form-item>-->
<!--        <el-form-item label="轮胎条形码3" prop="TireCode3">-->
<!--          {{ form.TireCode3 }}-->
<!--        </el-form-item>-->
<!--        <el-form-item label="轮胎条形码4" prop="TireCode4">-->
<!--          {{ form.TireCode4 }}-->
<!--        </el-form-item>-->

<!-- 轮胎条码照片 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="轮胎条形码照片" prop="TireImage">
              <ul style="list-style: none; display: flex; padding: 0; margin: 0;">
                <li v-for="(value, key, index) in form.TireImageList">
                  <image-preview :src="form.TireImage" :index="key" alt="" :width="50" :height="50" style="margin-right: 10px" />
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>
<!-- 付款凭证 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款凭证" prop="InvoiceImage">
              <ul style="list-style: none; display: flex; padding: 0; margin: 0;">
                <li v-for="(value, key, index) in form.InvoiceImageList">
                  <image-preview :src="form.InvoiceImage" :index="key" alt="" :width="50" :height="50" style="margin-right: 10px" />
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="创建时间" prop="Created">
              {{ form.Created }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
              <el-divider />
          </el-col>
        </el-row>

        <el-row v-if="viewBtn == true">
          <el-col :span="24">
            <el-form-item label="审核意见" prop="StatusMemo">
              <el-input v-model="form.StatusMemo"
                        type="textarea"
                        rows="5"
                        style="width: 400px"
                        maxlength="100"
                        placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="cancel" v-if="viewBtn == false">返 回</el-button>
          <el-button type="primary" @click="submitFormAudit(2)" v-if="viewBtn == true">通 过</el-button>
          <el-button type="primary" @click="submitFormAudit(3)" v-if="viewBtn == true">拒 绝</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="WarrantyCard">
import { isExternal } from "@/utils/validate";
import { listWarrantyCard, getWarrantyCard, delWarrantyCard, addWarrantyCard, updateWarrantyCard, updateAuditWarrantyCard } from "@/api/merchant/warrantyCard";

const { proxy } = getCurrentInstance();
let { service_warranty_card_status, sys_yes_no } = proxy.useDict('service_warranty_card_status', 'sys_yes_no');

const baseOldUrl = import.meta.env.VITE_APP_OLD_BASE_API;
const warrantyCardList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const open = ref(false);
const title = ref("");

const dateRangeCreated = ref([]);
const dateRangeBuyDay = ref([]);

const title2 = ref("");
const open2 = ref(false);
const viewBtn = ref(false);

const newServiceWarrantyCardStatus = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    StoreName: null,
    Province: null,
    City: null,
    Address: null,
    StoreKeeperName: null,
    StoreLink: null,
    BuyDay: null,
    InvoiceImage: null,
    TireImage: null,
    InvoiceImageList: [],
    TireImageList: [],
    OpenId: null,
    Status: 1,
    StatusMemo: null,
    Created: null,
    TireCode1: null,
    TireCode2: null,
    TireCode3: null,
    TireCode4: null,
    TireCode5: null,
    TireCode6: null,
    TireCode7: null,
    TireCode8: null,
    Agree: null
  },
  rules: {
  }
});

// 列显隐信息
const columns = ref([
  { key: 0, label: `编号`, visible: false },
  { key: 1, label: `购买日期`, visible: true },
  { key: 2, label: `姓名`, visible: true },
  { key: 3, label: `驾照`, visible: true },
  { key: 4, label: `省份`, visible: true },
  { key: 5, label: `城市`, visible: true },
  { key: 6, label: `地址`, visible: true },
  { key: 7, label: `门店名称`, visible: true },
  { key: 8, label: `门店联系方式`, visible: true },
  { key: 9, label: `发票地址`, visible: true },
  { key: 10, label: `状态`, visible: true },
  { key: 11, label: `Openid`, visible: false },
  { key: 12, label: `状态`, visible: true },
  { key: 13, label: `审核意见`, visible: true },
  { key: 14, label: `轮胎条形码1`, visible: true },
  { key: 15, label: `轮胎条形码2`, visible: true },
  { key: 16, label: `轮胎条形码3`, visible: true },
  { key: 17, label: `轮胎条形码4`, visible: true },
  { key: 18, label: `创建时间`, visible: true },
]);

const { queryParams, form, rules } = toRefs(data);
const props = defineProps({
  modelValue: [String, Object, Array],
  // 图片数量限制
  limit: {
    type: Number,
    default: 5,
  },
  // 大小限制(MB)
  fileSize: {
    type: Number,
    default: 5,
  },
  // 文件类型, 例如['png', 'jpg', 'jpeg']
  fileType: {
    type: Array,
    default: () => ["png", "jpg", "jpeg"],
  },
  // 是否显示提示
  isShowTip: {
    type: Boolean,
    default: true
  },
});

let newWarrantyCardList = [];


/** 查询质保卡列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (null != dateRangeCreated && '' != dateRangeCreated) {
    queryParams.value.params["beginCreated"] = dateRangeCreated.value[0];
    queryParams.value.params["endCreated"] = dateRangeCreated.value[1];
  }
  if (null != dateRangeBuyDay && '' != dateRangeBuyDay) {
    queryParams.value.params["beginBuyDay"] = dateRangeBuyDay.value[0];
    queryParams.value.params["endBuyDay"] = dateRangeBuyDay.value[1];
  }
  listWarrantyCard(queryParams.value).then(response => {
    warrantyCardList.value = response.rows;
    newWarrantyCardList = response.rows;

    // 兼容老的图片数据
    warrantyCardList.value.forEach((item) => {
      let val = item.InvoiceImage;
      if (val) {
        // 首先将值转为数组
        let newValArray = [];
        const list = Array.isArray(val) ? val : val.split(";");
        // 然后将数组转为对象数组
        list.map(v => {
          if (typeof v === "string") {
            // TODO 2024-07-31 兼容之前的数据图片转成在线地址
            if (!isExternal(v)) {
              newValArray.push(baseOldUrl + v);
            } else {
              newValArray.push(v);
            }
          }
        })
        if (newValArray.length > 0) {
          item.InvoiceImage = newValArray.join(";").toString()
        }
      }
    });

    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  open2.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    Id: null,
    Name: null,
    LicencePlate: null,
    Mobile: null,
    StoreName: null,
    Province: null,
    City: null,
    Address: null,
    StoreKeeperName: null,
    StoreLink: null,
    BuyDay: null,
    InvoiceImage: null,
    TireImage: null,
    OpenId: null,
    Status: null,
    StatusMemo: null,
    Created: null,
    DriverLicence: null,
    TireCode1: null,
    TireCode2: null,
    TireCode3: null,
    TireCode4: null,
    TireCode5: null,
    TireCode6: null,
    TireCode7: null,
    TireCode8: null,
    Agree: null
  };
  proxy.resetForm("warrantyCardRef");

  //
  proxy.resetForm("warrantyCardRefAudit");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRangeCreated.value = [];
  dateRangeBuyDay.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.Id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加质保卡";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _Id = row.Id || ids.value
  getWarrantyCard(_Id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改质保卡";
  });
}

/** 审核按钮打开操作 */
function handleAudit(row, status) {
  reset();
  const _Id = row.Id || ids.value
  getWarrantyCard(_Id).then(response => {
    response.data.InvoiceImageList = [];
    response.data.TireImageList = [];
    form.value = response.data;
    form.value.StatusMemo = '';
    let val = form.value.InvoiceImage;
    if (val) {
      // 首先将值转为数组
      let newArr = [];
      const list = Array.isArray(val) ? val : val.split(";");
      // 然后将数组转为对象数组
      list.map(v => {
        if (typeof v === "string") {
          // TODO 2024-07-31 兼容之前的数据图片转成在线地址
          if (!isExternal(v)) {
            newArr.push(baseOldUrl + v);
          } else {
            newArr.push(v);
          }
        }
      });
      if (newArr.length > 0) {
        form.value.InvoiceImageList = newArr;
        form.value.InvoiceImage = newArr.join(";").toString();
      }
    }

    //  轮胎图片转换
    let tireImageVal = form.value.TireImage;
    if (tireImageVal) {
      // 首先将值转为数组
      let tireImageNewArr = [];
      const tireImageList = Array.isArray(tireImageVal) ? tireImageVal : tireImageVal.split(";");
      // 然后将数组转为对象数组
      tireImageList.map(v => {
        if (typeof v === "string") {
          tireImageNewArr.push(v);
        }
      });
      if (tireImageNewArr.length > 0) {
        form.value.TireImageList = tireImageNewArr;
        form.value.TireImage = tireImageNewArr.join(";").toString();
      }
    }
  });

  // 显示页面
  open2.value = true;
  if (status == 1) {
    viewBtn.value = false;
    title2.value = "质保卡详情";
  } else if (status == 2) {
    viewBtn.value = true;
    title2.value = "审核质保卡";
  }
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["warrantyCardRef"].validate(valid => {
    if (valid) {
      if (form.value.Id != null) {
        updateWarrantyCard(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addWarrantyCard(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 提交按钮 */
function submitFormAudit(status) {
  if (status == 3 && form.value.StatusMemo == '') {
    proxy.$modal.msgWarning("请填写审核意见");
    return;
  }

  proxy.$refs["warrantyCardRefAudit"].validate(valid => {
    if (valid) {
      if (form.value.Id != null) {
        let data = {
          Id: form.value.Id,
          Status: status,
          StatusMemo: form.value.StatusMemo,
        }
        updateAuditWarrantyCard(data).then(response => {
          proxy.$modal.msgSuccess("审核成功");
          open2.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _Ids = row.Id || ids.value;
  proxy.$modal.confirm('是否确认删除质保卡编号为"' + _Ids + '"的数据项？').then(function() {
    return delWarrantyCard(_Ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('merchant/warrantyCard/export', {
    ...queryParams.value
  }, `warrantyCard_${new Date().getTime()}.xlsx`)
}

function getTextWidth (str) {
  let width = 0
  const html = document.createElement('span')
  html.innerText = str
  html.className = 'getTextWidth'
  document.querySelector('body').appendChild(html)
  width = document.querySelector('.getTextWidth').offsetWidth
  document.querySelector('.getTextWidth').remove()
  return width
}

//遍历列的所有内容，获取最宽一列的宽度
function getMaxLength (arr) {
  return arr.reduce((acc, item) => {
    if (item) {
      const calcLen = getTextWidth(item)
      if (acc < calcLen) {
        acc = calcLen
      }
    }
    return acc
  }, 0)
}

/**
 * el-table-column 自适应列宽
 * @param prop_label: 表名
 * @param table_data: 表格数据
 */

function flexColumnWidth (label, prop) {
// 1.获取该列的所有数据
  const arr = newWarrantyCardList.map(x => x[prop])
// 把每列的表头也加进去算
  arr.push(label)
// 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
  return (getMaxLength(arr) + 40) + 'px';
}

function closeDialog(done){
  //console.log(222);
  const a = document.getElementsByClassName('el-image-viewer__wrapper')[0];
  //console.log(a);
  if(!a){
    done()
  }
}

function changeStatus() {
  let status = queryParams.value.Status;
  if (!status) {
    queryParams.value.Status = 0
  }
}

function clearStatus() {
  queryParams.value.Status = 0
}

getList();
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 4px !important;
}

.el-form--inline .el-form-item {
  margin-right: 0px;
}

.el-input{
  margin-right: 10px;
}
</style>